<template>
  <div id="ageSpread" @click="valueList">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    pieData: Array | Object,
    name: String
  },
  data() {
    return {};
  },
  computed: {
    pieDataValue() {
      let arr = this.pieData.map(function (item) {
        return item.value;
      });
      return this.scaleValue(arr);
    },
    pieDataName() {
      let arr = this.pieData.map(function (item) {
        return item.name;
      });
      return arr;
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.drawAgeSpread();
  },

  methods: {
    valueList() {
      console.log(this.pieDataValue);
    },

    // js 计算百分比的方法
    scaleValue(countArray) {
      var j = eval(countArray.join('+'));
      var resultArray = [];
      for (var i = 0; i < countArray.length; i++) {
        var k = ((countArray[i] / j) * 100).toFixed(2);
        resultArray.push(k);
      }
      return resultArray;
    },
    drawAgeSpread() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#e5e5e5'
            }
          },
          formatter: '{a} <br/>{b}: ({c}%)'
        },
        grid: {
          top: '5%',
          bottom: '110',
          borderWidth: 0,
          y: 80,
          y2: 60
        },
        xAxis: [
          {
            type: 'category',
            show: 'false',
            data: this.pieDataName,
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#888',
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#e5e5e5', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100,
            // show: false,
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value} %', //给y轴的刻度线数据后面加个百分号（%）
              show: true,
              textStyle: {
                color: '#888',
                // fontFamily: "DINAlternate-Bold",
                fontSize: 12
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#e5e5e5'],
                width: 1,
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#e5e5e5', //左边线的颜色
                width: '1' //坐标线的宽度
              }
            },

            data: this.pieDataValue
          }
        ],
        series: [
          {
            name: this.name,
            type: 'bar',
            barWidth: 20,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  //标签内容
                  return params.value + '%';
                },
                position: 'top',
                fontSize: 10,
                color: '#888'
              }
            },

            itemStyle: {
              normal: {
                // color:function(params) {
                //     var colorList = [
                //         '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                //         '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                //         '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                //     ]
                //     return colorList[params.dataIndex]
                // },
                color: '#f4b477',
                label: {
                  show: true,
                  position: 'top'
                  // formatter: '{b}\n{c}%'
                }
              }
            },
            data: this.pieDataValue
          }
        ]
        // color: that.colorList,
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b}: ({d}%)",
        // },
        // // legend: {
        // //   orient: "vertical",
        // //   left: 10,
        // //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        // // },
        // series: [
        //   {
        //     name: that.name,
        //     type: "pie",
        //     radius: ["42%", "55%"],
        //     center: ["50%", "50%"],
        //     minAngle: 18,
        //     avoidLabelOverlap: false,
        //     labelLine: {
        //       // 设置指示线的长度
        //       normal: {
        //         length: 15,
        //         length2: 8,
        //       },
        //     },
        //     label: {
        //       //   position: "center",
        //       formatter: " {b|{b}：}" + " " + "{d|{d}% }",
        //       borderColor: "#aaa",
        //       avoidLabelOverlap: true,
        //       rich: {
        //         b: {
        //           fontSize: 12,
        //           lineHeight: 33,
        //         },
        //         d: {
        //           align: "center",
        //         },
        //       },
        //     },
        //     emphasis: {
        //       label: {
        //         show: true,
        //         fontSize: "30",
        //         fontWeight: "bold",
        //       },
        //     },
        //     data: that.pieData,
        //   },
        // ],
      };
      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener('resize', resizeFn);
        this.$once('hook:beforeDestroy', () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener('resize', resizeFn);
        });
      }, 200);
    }
  }
};
</script>
<style lang='less' scoped>
#ageSpread {
  width: 100%;
  height: 100%;
  //   margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>